CE.WIDGETS.SLIDER = {
    
    init: function () {

        var slider_opts = {
            range: true,
            values: [2000, 2005], 
            min: CE.START_YEAR,
            max: CE.END_YEAR,
            step: 1,
            change: function () {
                CE.start_year = CE.WIDGETS.SLIDER.$.slider("values", 0);
                CE.end_year = CE.WIDGETS.SLIDER.$.slider("values", 1);
                if (CE.start_year > CE.end_year - 1) {
                    CE.WIDGETS.SLIDER.$.slider('value',0,CE.end_year - 1);
                    CE.start_year = CE.end_year - 1;
                }
                CE.MEDIA.refresh();
                CE.LAYERS.wfs.refresh();
            }
        };
        
        this.markers.$ = $('#ce_slider_markers');
        
        // Create the date range slider widget.
        this.markers.$.click(function (e) {
            var fid = e.target.id.replace("marker_", "").replace(/\-/g, '.');
            feature = CE.MEDIA.get_feature_by_id(fid);
            if (!feature) {
                var w = CE.WIDGETS.SLIDER.$.find('td:first').outerWidth();
                CE.WIDGETS.ANIMATION.set_period(Math.floor(e.pageX / w));
                CE.MEDIA.refresh();
                feature = CE.MEDIA.get_feature_by_id(fid);
            }
            if (feature) {
                CE.MEDIA.dialog(feature, {
                    recenter: true
                });
            }
        }).mouseover(function (e) {
            CE.LAYERS.draw_tooltip({ce:$(e.target).data('ce')},e.target);
        });
        this.$wrapper = $("#ce_slider_rulings");
        this.$=this.$wrapper.find("table");
        this.$.click(this.click.createDelegate(this));
        
        this.$date_display = $("#ce_date_display");
         
        if (CE.hide_timeline_default === 'True') {
            this.toggle();
        }

    },
    
    change: function () {
    
        CE.MEDIA.refresh();
        CE.LAYERS.wfs.refresh();
        this.$date_display.text(CE.start_year + ' - ' + CE.end_year);
    },
    
    click: function(evt) {

        // if we've clicked a label, get the actual parent node.
        if (evt.target.tagName !== 'TD') {evt.target=evt.target.parentNode;}
        CE.WIDGETS.ANIMATION.position = this.$.find('td').index(evt.target);
        this.set(parseInt(evt.target.id.replace('ruling_',''), 10));
        CE.map_moved();
        
    },
    
    // provide a numerical year or a dom element clicked.
    set: function(start_year) {
        
        CE.start_year = start_year;
        CE.end_year = start_year + this.ruling_interval - 1;
        this.$.find('td.active').removeClass('active');
        this.$.find('td#ruling_'+start_year).addClass('active');
        this.change();
        
    }, 
    
    // a manager for the time slider marker icons
    markers: {
        
        add: function(opts) {
        
            rel = (opts.ce.start_year - CE.START_YEAR);
            marker_pos_left = Math.floor(CE.WIDGETS.SLIDER.year_width * rel);
            marker_pos_top = this.cycle_top;
            this.cycle_top = (this.cycle_top + 7) % 77;
            
            return $("<div class='marker-item'></div>").css({
                    left: marker_pos_left + 'px',
                    top: marker_pos_top + 'px',
                    'background-color':opts.color,
                    width: (opts.width || 5) + 'px'
                }).attr({
                    id: 'marker_' + opts.id.replace(/\./g, "-")
                }).data('ce',opts.ce)
                .appendTo(this.$);
        },
        
        refresh: function () {
            var feature, layer, offset, width, rel, style;
            this.cycle_top = 0;

            this.$.empty();
            var that=this;
            CE.MEDIA.iter_all_features(function (feature) {
                // add a marker to the time slider.
                if (feature.ce.start_year && CE.THEME.contains(feature)) {

                    that.add({
                        color: CE.WIDGETS.TABS.FILTERS.colors[feature.ce.type.name],
                        left: Math.floor(CE.WIDGETS.SLIDER.year_width * (feature.ce.start_year - CE.START_YEAR)),
                        ce: feature.ce,
                        id: feature.id
                    });

                }
            });
            
            // update current layers based on timeslider.
            for (i = 0; i < CE.map.layers.length; i++) {
                layer = CE.map.layers[i];
                // test if the layer is dynamic wrt time.
                // add a marker to the time slider.
                if (layer.ce && layer.ce.start_year && CE.THEME.contains(layer)) {
                    style = layer.ce.style || {
                        fillColor:'#aaa',
                        fillOpacity:'0.5'
                    };
                    this.add({
                        color: style.strokeColor || style.fillColor,
                        opacity: style.strokeOpacity || style.fillOpacity,
                        left: Math.floor(CE.WIDGETS.SLIDER.year_width * (layer.ce.start_year - CE.START_YEAR)),
                        ce: layer.ce,
                        id: layer.id,
                        width:Math.floor(CE.WIDGETS.SLIDER.year_width * (layer.ce.end_year - layer.ce.start_year))
                    }).css('height','3px');
                }
            } // end layer loop
        }
        
        
    },
    
    update: function () {
    
        var width = this.$.outerWidth();
        var offset = this.$.offset();
        
        // the range slider rulings.
        
        // the list of possible ruling intervals. determine the most appropriate one for this time scale.
        var ruling_intervals = [100, 50, 20, 10, 5, 1];
        this.ruling_interval = (CE.END_YEAR - CE.START_YEAR) / 4;
        for (var i = 0; i < ruling_intervals.length; i++) {
            if (this.ruling_interval > ruling_intervals[i]) {
                this.ruling_interval = ruling_intervals[i];
                break;
            }
        }
        
        // cache the number of years for later calculating distances relative to time.
        var $rulings = this.$.find('tr').empty();
        
        var first_ruling = Math.floor(CE.START_YEAR + this.ruling_interval * 1.5);
        first_ruling = first_ruling - (first_ruling % this.ruling_interval);
        var last_ruling = Math.floor(CE.END_YEAR - this.ruling_interval * 0.5);
        last_ruling = last_ruling - (last_ruling % this.ruling_interval);
        
        var num_rulings = 0;
        // place rulings at reasonable intervals between start and end years.
        var add_ruling = function (yr) {
            num_rulings++;
            $rulings.append($("<td><div class='year-tick'></div><div class='year-label'>" + yr + "</div></td>").attr({
                    id:'ruling_'+yr
                })
            );
        };
        // add rulings for all start year, end year and all years in between.
        add_ruling(CE.START_YEAR);
        for (var yr = first_ruling; yr <= last_ruling; yr += this.ruling_interval) {
            add_ruling(yr);
        }
        this.num_years = this.ruling_interval * num_rulings;
        this.year_width = (1.0 * width) / this.num_years;
    },
    
    on_resize: function() {
        var offset = this.$.offset();
        var width = this.$.outerWidth();
        this.year_width = 1.0 / this.num_years * width + offset.left ;
        this.markers.refresh();
    },
    
    toggle: AOP(function() {
        if (this.is_visible) {
            this.$wrapper.hide();
            $('#timeline_toggle a:nth(2)').text("show timeline");
        } else {
           this.$wrapper.show();
            $('#timeline_toggle a:nth(2)').text("hide timeline");
        }
        this.is_visible = !this.is_visible;
    }),
    
    is_visible: true

};
